<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/business/list' }">商保方案</el-breadcrumb-item>
        <el-breadcrumb-item>查看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer viewBusinessPage">
      <!-- 查看服务公司表单 -->
      <div class="customform shebaoform">
        <el-form :inline="true" label-width="130px" label-position="left">
          <div class="el-form--inline">
            <el-form-item label="方案编号" prop="value1">
              <div class="el-input form-control-static">{{product.productCode}}</div>
            </el-form-item>
            <el-form-item label="名称" prop="value1">
              <div class="el-input form-control-static">{{product.name}}</div>
            </el-form-item>
            <el-form-item label="服务公司" prop="value2">
              <div class="el-input form-control-static">{{product.optrCompName}}</div>
            </el-form-item>
            <el-form-item label="合同期限" prop="value3">
              <div class="el-input form-control-static">{{product.startDate}}至{{product.endDate}}</div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="最小年龄">
              <div class="el-input form-control-static">{{product.maleAgeMin}}</div>
            </el-form-item>
            <el-form-item label="男最大年龄">
              <div class="el-input form-control-static">{{product.maleAgeMax}}</div>
            </el-form-item>
            <el-form-item label="女最大年龄">
              <div class="el-input form-control-static">{{product.femaleAgeMax}}</div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="保险周期">
              <div class="el-input form-control-static">{{product.cycleCode === "1" ? '年':'月'}}</div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 查看服务公司表单结束 -->
    </div>

    <div>
      <!-- 表格 -->
      <div class="mainContainer m-t20">
        <!-- 表格 -->
        <div class="zy-form my-table">
          <template>
            <el-table :data="items">
              <el-table-column label="项目名称" width="300">
                <template slot-scope="scope">
                  <el-input  disabled v-model="scope.row.itemName" placeholder></el-input>
                </template>
              </el-table-column>
              <el-table-column label="项目值">
                <template slot-scope="scope">
                  <el-tag
                    class="product-value"
                    :key="tag"
                    v-for="tag in scope.row.itemValues.split(',')"
                    :disable-transitions="false"
                  >{{tag}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot="header">
                  <el-button class="fr" size="small" @click="viewPrice">
                    <i class="iconfont iconbook"></i> 价格清单
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <!-- 表格结束 -->
      </div>
      <!-- 表格结束 -->
    </div>

    <!-- 保险责任 -->
    <div class="mainContainer m-t20">
      <h1 class="com-title">保险责任</h1>
      <div v-html="product.terms">

      </div>
    </div>
    <!-- 保险责任结束 -->

    <div class="page-form-btn">
      <el-button>取消</el-button>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "viewBusiness",
  data() {
    return {
      editorOption: {
        // some quill options
        placeholder: "请输入内容"
      },
      product:{},
      // 表格
      items: [
      ]
    };
  },
  created() {
    this.init();
  },
  methods: {
    init: function() {
      Http.api.get("/insure/"+this.$route.query.id).then(res => {
        this.product = res.data.productDto;
        this.items = res.data.items;
      });
    },
    //价格清单
    viewPrice() {
      this.$router.push({ path: "/business/viewPrice",query:{id:this.$route.query.id} });
    }
  }
};
</script>
